import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';
import Upload from 'rc-upload';

import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Checkbox,
  Radio,
  Badge,
  Divider,
  Table,
} from 'antd';
const { RangePicker } = DatePicker;
const { TextArea } = Input;
const confirm = Modal.confirm;
import DescriptionList from 'components/DescriptionList';
const { Description } = DescriptionList;
const RadioGroup = Radio.Group;

import {
  articleAdd,
  articleUpdate,
  matchAchievementsReport,
  matchExpertReport,
  matchPatentReport,
  matchEnterpriseTag,
  matchRequestTag,
  matchRequestTagDelete,
  tagList,
  matchRequestTagAdd,
} from '../../services/api';
import { getArrFromObj, getToken, getCurrent } from '../../utils/utils';
import config from '../../common/config';

import StandardTable from 'components/StandardTable';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

import styles from './requestMatch.less';

import uploadPng from '../../assets/upload.png';

const FormItem = Form.Item;
const { Option } = Select;
const getValue = obj =>
  Object.keys(obj)
    .map(key => obj[key])
    .join(',');

const PAGE_STATUS_MAP = {
  '0': '无效',
  '1': '有效',
};

const PAGE_STATUS_ARR = getArrFromObj(PAGE_STATUS_MAP);

const PAGE_CATEGORY_MAP = {
  'PROJECT_DECLARATION': '项目申报',
  'PATENT_APPLICATION': '专利申请',
  'INTELLECTUAL_PROPERTY_RIGHT': '知识产权贯标',
  'LEGAL_AID': '法律援助',
  'ANALYSIS_OF_PATENT_INFORMATION': '专利情报分析',
  'EVALUATION_OF_PATENT_VALUE': '专利价值评估',
  'TECHNICAL_AUTOMATIC_MATCHING': '技术自动匹配',
  'OTHER_REQUIREMENTS': '其他需求',
};

const PAGE_CATEGORY_ARR = getArrFromObj(PAGE_CATEGORY_MAP);

const PAGE_SIZE = 10;

const PATENT_CLS_MAP = {
  FMZL: '发明公开',
  SYXX: '实用新型',
  WGZL: '外观设计',
  FMSQ: '发明授权',
};

@connect(({ requestMatch, loading }) => {
  return {
    requestMatch,
    loading: loading.models.requestMatch,
  };
})
@Form.create()
export default class List extends PureComponent {
  state = {
    modalVisible: false,
    selectedRows: [],
    formValues: {},
    id: null,

    step2: 1,

    imgOptions: {},

    enterpriseRequestTag: [],

    enterprisePatentReportList: [],
    enterprisePatentReportPagination: {},
    enterprisePatentReportPageIndex: 1,
    enterprisePatentReportPageSize: 10,

    enterpriseAchievementsReportList: [],
    enterpriseAchievementsReportPagination: {},
    enterpriseAchievementsReportPageIndex: 1,
    enterpriseAchievementsReportPageSize: 10,

    enterpriseExpertReportList: [],
    enterpriseExpertReportPagination: {},
    enterpriseExpertReportPageIndex: 1,
    enterpriseExpertReportPageSize: 10,

    tagListPageIndex: 1,
    tagListPageSize: 10,
    detailRequestId: 0,
    tagListData: {},
    tagName: null,
  };

  componentDidMount() {
    this.getImgOptions();
    this.init();
  }

  getImgOptions() {
    const token = getToken();

    const imgOptions = {
      action: config.serveraddress + '/upload/putObject?dataType=0',
      data: { dataType: 0 },
      headers: {
        Authorization: 'Bearer ' + token,
      },
      multiple: false,
      beforeUpload(file) {
        console.log('beforeUpload', file.name);
      },
      onStart: file => {
        console.log('onStart', file.name);
      },
      onProgress(step, file) {},
    };

    this.setState({
      imgOptions,
    });
  }

  init() {
    const { dispatch } = this.props;
    dispatch({
      type: 'requestMatch/queryList',
      payload: {
        pageNum: 1,
        pageSize: PAGE_SIZE,
      },
    });
  }

  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const { dispatch } = this.props;
    const { formValues } = this.state;

    const filters = Object.keys(filtersArg).reduce((obj, key) => {
      const newObj = { ...obj };
      newObj[key] = getValue(filtersArg[key]);
      return newObj;
    }, {});

    const params = {
      ...formValues,
      ...filters,
      pageNum: pagination.current,
      pageSize: pagination.pageSize,
    };
    if (sorter.field) {
      params.sorter = `${sorter.field}_${sorter.order}`;
    }

    dispatch({
      type: 'requestMatch/queryList',
      payload: params,
    });
  };

  handleFormReset = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    this.setState({
      formValues: {},
    });
    dispatch({
      type: 'requestMatch/queryList',
      payload: {
        pageNum: 1,
        pageSize: PAGE_SIZE,
      },
    });
  };

  handleSelectRows = rows => {
    this.setState({
      selectedRows: rows,
    });
  };

  handleSearch = e => {
    e.preventDefault();

    const { dispatch, form } = this.props;

    form.validateFields((err, fieldsValue) => {
      if (err) return;

      if (!fieldsValue.enterName) {
        delete fieldsValue.enterName;
      }
      if (!fieldsValue.requestTitle) {
        delete fieldsValue.requestTitle;
      }
      if (!fieldsValue.name) {
        delete fieldsValue.name;
      }
      if (!fieldsValue.requestType) {
        delete fieldsValue.requestType;
      }

      const values = {
        ...fieldsValue,
        pageNum: 1,
        pageSize: PAGE_SIZE,
      };

      dispatch({
        type: 'requestMatch/queryList',
        payload: values,
      });
    });
  };

  handleShowModal = e => {
    e.preventDefault();
    this.setState({
      id: null,
      modalVisible: true,
      levelRule: '',
      name: '',
    });
  };

  handleCancel = e => {
    this.setState({
      modalVisible: false,
    });
  };

  handleCancel2 = e => {
    this.setState({
      modalVisible2: false,
    });
  };

  async handleSave(e) {
    const {
      title,
      status,
      category,
      author,
      coverUrl,
      pcTitle,
      pcKeywords,
      pcDesc,
      mobileTitle,
      mobileKeywords,
      mobileDesc,
      content,
    } = this.state;
    if (!title) {
      return message.error('请填写文章标题');
    }

    if (!author) {
      return message.error('请填写文章作者');
    }

    if (!category) {
      return message.error('请选择文章分类');
    }

    if (!content) {
      return message.error('请填写文章内容');
    }

    await this.doSave();
  }

  async doSave() {
    const { dispatch } = this.props;

    const {
      id,
      title,
      status,
      category,
      author,
      coverUrl,
      pcTitle,
      pcKeywords,
      pcDesc,
      mobileTitle,
      mobileKeywords,
      mobileDesc,
      content,
    } = this.state;

    let response = {};
    if (id) {
      const params = {
        id,
        title,
        status,
        category,
        author,
        coverUrl,
        pcTitle,
        pcKeywords,
        pcDesc,
        mobileTitle,
        mobileKeywords,
        mobileDesc,
        content: content.toHTML(),
      };
      response = await articleUpdate(params);
    } else {
      const params = {
        title,
        status,
        category,
        author,
        coverUrl,
        pcTitle,
        pcKeywords,
        pcDesc,
        mobileTitle,
        mobileKeywords,
        mobileDesc,
        content: content.toHTML(),
      };
      response = await articleAdd(params);
    }

    if (response.code === 200) {
      this.setState({
        modalVisible: false,
      });

      this.init();
    } else {
      message.error(response.message);
    }
  }

  handleReply(item) {
    this.setState({
      ...item,
      modalVisible: true,
    });
  }

  handleOnchange(field, e) {
    this.setState({
      [field]: e.target.value,
    });
  }

  onChange(field, value, dateString) {
    this.setState({
      [field]: dateString,
    });
  }

  handleSelectOnchange(field, value) {
    this.setState({
      [field]: value,
    });
  }

  onRadioChange(field, e) {
    this.setState({
      [field]: e.target.value,
    });
  }

  handlePatentListChange(pagination) {
    this.setState(
      {
        enterprisePatentReportPageIndex: pagination.current,
        enterprisePatentReportPageSize: pagination.pageSize,
      },
      () => {
        this.enterprisePatentReport(this.state.detailRequestId);
      }
    );
  }

  handleAchievementListChange(pagination) {
    this.setState(
      {
        enterpriseAchievementsReportPageIndex: pagination.current,
        enterpriseAchievementsReportPageSize: pagination.pageSize,
      },
      () => {
        this.enterpriseAchievementsReport(this.state.detailRequestId);
      }
    );
  }

  handleExpertListChange(pagination) {
    this.setState(
      {
        enterpriseExpertReportPageIndex: pagination.current,
        enterpriseExpertReportPageSize: pagination.pageSize,
      },
      () => {
        this.enterpriseExpertReport(this.state.detailRequestId);
      }
    );
  }

  async handleEdit(item) {
    this.state.detailRequestId = item.id;
    await this.enterprisePatentReport(item.id);
    await this.enterpriseAchievementsReport(item.id);
    await this.enterpriseExpertReport(item.id);

    this.setState({
      ...item,
      modalVisible: true,
    });
  }

  async handleEditTag(item) {
    await this.enterpriseRequestTagList(item.id);

    await this.tagList();

    this.setState({
      ...item,
      modalVisible2: true,
    });
  }

  async tagList() {
    const { tagListPageIndex, tagName, tagListPageSize} = this.state;

    let params = {
      pageNum: tagListPageIndex,
      pageSize: tagListPageSize,
    };
    if (tagName) {
      params.name = tagName;
    }
    const { code, message, data } = await tagList(params);

    data.list.map(item => {
      item.key = item.id;
    });

    this.setState({
      tagListData: {
        list: data.list,
        pagination: {
          total: data.total,
          pageSize: tagListPageSize,
          current: tagListPageIndex,
        },
      },
    });
  }

  async enterprisePatentReport(requestId) {
    const { enterprisePatentReportPageIndex,enterprisePatentReportPageSize } = this.state;

    let params = {
      pageNum: enterprisePatentReportPageIndex,
      pageSize: enterprisePatentReportPageSize,
      requestId,
    };
    const { code, message, data } = await matchPatentReport(params);

    data.list.map(item => {
      item.key = item.id;
    });

    this.setState({
      enterprisePatentReportList: data.list,
      enterpriseRequestPagination: {
        total: data.total,
        pageSize: enterprisePatentReportPageSize,
        current: enterprisePatentReportPageIndex,
      },
    });
  }

  async enterpriseAchievementsReport(requestId) {
    const { enterpriseAchievementsReportPageIndex,enterpriseAchievementsReportPageSize} = this.state;

    let params = {
      pageNum: enterpriseAchievementsReportPageIndex,
      pageSize: enterpriseAchievementsReportPageSize,
      requestId,
    };

    const { code, message, data } = await matchAchievementsReport(params);

    data.list.map(item => {
      item.key = item.id;
    });

    this.setState({
      enterpriseAchievementsReportList: data.list,
      enterpriseAchievementsPagination: {
        total: data.total,
        pageSize: enterpriseAchievementsReportPageSize,
        current: enterpriseAchievementsReportPageIndex,
      },
    });
  }

  async enterpriseExpertReport(requestId) {
    const { enterpriseExpertReportPageIndex,enterpriseExpertReportPageSize } = this.state;

    let params = {
      pageNum: enterpriseExpertReportPageIndex,
      pageSize: enterpriseExpertReportPageSize,
      requestId,
    };
    const { code, message, data } = await matchExpertReport(params);

    if (data) {
      data.list.map(item => {
        item.key = item.id;
      });

      this.setState({
        enterpriseExpertReportList: data.list,
        enterpriseExpertReportPagination: {
          total: data.total,
          pageSize: enterpriseExpertReportPageSize,
          current: enterpriseExpertReportPageIndex,
        },
      });
    }
  }

  async enterpriseRequestTagList(requestId) {
    const { enterpriseRequestPageIndex } = this.state;
    const { code, message, data } = await matchRequestTag({
      requestId,
    });

    this.setState({
      enterpriseRequestTag: data,
    });
  }

  async handleDelTag(id) {
    confirm({
      title: '确认信息',
      content: `确认删除？`,
      onOk: (async () => {
        const { code, message, data } = await matchRequestTagDelete({
          id,
        });

        this.init();
      }).bind(this),
      onCancel() {},
    });
  }

  renderForm() {
    return this.renderAdvancedForm();
  }

  renderAdvancedForm() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={6} sm={24}>
            <FormItem label="">
              {getFieldDecorator('enterName')(<Input placeholder="企业名称" />)}
            </FormItem>
          </Col>
          <Col md={6} sm={24}>
            <FormItem label="">
              {getFieldDecorator('requestTitle')(<Input placeholder="需求标题" />)}
            </FormItem>
          </Col>
          <Col md={6} sm={24}>
            <FormItem label="">
              {getFieldDecorator('requestType')(
                <Select style={{ width: '100%' }} placeholder="需求分类">
                  <Option value="">全部</Option>
                  {PAGE_CATEGORY_ARR.map(item => {
                    return (
                      <Option key={item.id} value={item.id}>
                        {item.name}
                      </Option>
                    );
                  })}
                </Select>
              )}
            </FormItem>
          </Col>

          <Col md={6} sm={24}>
            <span style={{ float: 'left', marginBottom: 24 }}>
              <Button type="primary" onClick={this.handleSearch.bind(this)}>
                查询
              </Button>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  handleEditorChange = editorState => {
    this.setState({
      content: editorState,
    });
  };

  uploadSuccess(res, field) {
    this.setState({
      [field]: res.data,
    });
  }

  uploadError(res, field) {
    debugger;
  }

  changeTab2Index(step2) {
    this.setState({
      step2,
    });
  }

  renderFormTag() {
    return this.renderAdvancedFormTag();
  }

  renderAdvancedFormTag() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSearchTag} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={6} sm={24}>
            <FormItem label="">
              {getFieldDecorator('name')(<Input placeholder="标签名称" />)}
            </FormItem>
          </Col>

          <Col md={6} sm={24}>
            <span style={{ float: 'left', marginBottom: 24 }}>
              <Button type="primary" onClick={this.handleSearchTag.bind(this)}>
                查询
              </Button>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  handleSearchTag = e => {
    e.preventDefault();

    const { dispatch, form } = this.props;

    form.validateFields((err, fieldsValue) => {
      if (err) return;

      this.setState(
        {
          tagName: fieldsValue.name,
        },
        () => {
          this.tagList();
        }
      );
    });
  };

  async handleAddTag(item) {
    const { id } = this.state;
    const { code, data } = await matchRequestTagAdd({
      list: [
        {
          requestId: id,
          tagId: item.id,
        },
      ],
    });
    if (code === 200) {
      message.success('添加成功');
      this.enterpriseRequestTagList(id);
    }
  }

  handleStandardTableChangeTag = (pagination, filtersArg, sorter) => {
    const { dispatch } = this.props;
    const { formValues } = this.state;

    const filters = Object.keys(filtersArg).reduce((obj, key) => {
      const newObj = { ...obj };
      newObj[key] = getValue(filtersArg[key]);
      return newObj;
    }, {});

    this.setState(
      {
        ...formValues,
        ...filters,
        tagListPageIndex: pagination.current,
        tagListPageSize: pagination.pageSize,
      },
      () => {
        this.tagList();
      }
    );
  };

  render() {
    let { requestMatch: { data }, loading } = this.props;
    const { getFieldDecorator } = this.props.form;
    const { selectedRows, modalVisible, imgOptions, coverUrl } = this.state;

    const {
      step2,

      enterprisePatentReportList,
      enterprisePatentReportPagination,

      enterpriseAchievementsReportList,
      enterpriseAchievementsReportPagination,

      enterpriseExpertReportList,
      enterpriseExpertReportPagination,

      enterpriseRequestTag,
    } = this.state;

    const columns = [
      {
        title: '序号',
        dataIndex: 'id',
        width: 100,
        render: (val, item, index) => (
          <span>{(data.pagination.current - 1) * data.pagination.pageSize + index + 1}</span>
        ),
      },
      {
        title: '企业名称',
        ellipsis: true,
        dataIndex: 'enterName',
      },
      {
        title: '需求标题',
        dataIndex: 'requestTitle',
      },
      {
        title: '需求分类',
        dataIndex: 'requirementTypeName',
      },
      {
        title: '操作',
        dataIndex: '',
        render: (val, item) => (
          <span>
            <a href="javascript:;" onClick={this.handleEdit.bind(this, item)}>
              查看报告
            </a>&nbsp;<a href="javascript:;" onClick={this.handleEditTag.bind(this, item)}>
              管理标签
            </a>
          </span>
        ),
      },
    ];

    const columnsTag = [
      {
        title: '标签名称',
        ellipsis: true,
        width: 100,
        dataIndex: 'name',
      },
      {
        title: '操作',
        dataIndex: '',
        render: (val, item) => (
          <span>
            <a href="javascript:;" onClick={this.handleAddTag.bind(this, item)}>
              添加到需求标签
            </a>
          </span>
        ),
      },
    ];

    const enterprisePatentReportPaginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      ...enterprisePatentReportPagination,
    };

    const enterpriseAchievementsReportPaginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      ...enterpriseAchievementsReportPagination,
    };

    const enterpriseExpertReportPaginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      ...enterpriseExpertReportPagination,
    };

    return (
      <PageHeaderLayout title="标签管理">
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListForm}>{this.renderForm()}</div>
            <StandardTable
              disableSelect={true}
              selectedRows={selectedRows}
              loading={loading}
              data={data}
              columns={columns}
              onSelectRow={this.handleSelectRows}
              onChange={this.handleStandardTableChange}
            />
          </div>
        </Card>

        <Modal
          maskClosable={false}
          width="85%"
          title="查看报告"
          visible={this.state.modalVisible}
          onOk={this.handleCancel.bind(this)}
          onCancel={this.handleCancel.bind(this)}
        >
          <div className="data_area">
            <Row>
              <Col span={24}>
                <div className="left_wrap">
                  <div
                    className="tablist"
                    style={{
                      alignItems: 'center',
                      justifyContent: 'center',
                      display: 'flex',
                      paddingTop: '0px',
                      paddingBottom: '0px',
                    }}
                  >
                    <a
                      href="javascript:;"
                      style={{
                        width: '170px',
                        height: '40px',
                        border: '1px solid #c1c1c1',
                        borderLeft: '0px',
                        borderRight: '0px',
                        textAlign: 'center',
                        lineHeight: '40px',
                        backgroundColor: '#fff',
                      }}
                      onClick={this.changeTab2Index.bind(this, 1)}
                      className={step2 === 1 ? 'active firstTab' : 'firstTab'}
                    >
                      专利
                    </a>
                    <a
                      href="javascript:;"
                      style={{
                        width: '170px',
                        height: '40px',
                        border: '1px solid #c1c1c1',
                        borderLeft: '0px',
                        borderRight: '0px',
                        textAlign: 'center',
                        lineHeight: '40px',
                        backgroundColor: '#fff',
                      }}
                      onClick={this.changeTab2Index.bind(this, 2)}
                      className={step2 === 2 ? 'active secondTab' : 'secondTab'}
                    >
                      成果
                    </a>
                    <a
                      href="javascript:;"
                      style={{
                        width: '170px',
                        height: '40px',
                        border: '1px solid #c1c1c1',
                        borderLeft: '0px',
                        borderRight: '0px',
                        textAlign: 'center',
                        lineHeight: '40px',
                        backgroundColor: '#fff',
                      }}
                      onClick={this.changeTab2Index.bind(this, 3)}
                      className={step2 === 3 ? 'active thirdTab' : 'thirdTab'}
                    >
                      专家
                    </a>
                  </div>

                  <div className="datalist">
                    {step2 === 1 && (
                      <Table
                        columns={[
                          {
                            title: '专利申请号',
                            dataIndex: 'an',
                            // render: (val, item) => (
                            //   <a
                            //     target="_blank"
                            //     href={
                            //       config.searchSiteUrlPrefix + '/patentdetail.html?id=' + item.id
                            //     }
                            //   >
                            //     {val}
                            //   </a>
                            // ),
                          },
                          {
                            title: '专利名称',
                            dataIndex: 'ti',
                            // render: (val, item) => (
                            //   <a
                            //     target="_blank"
                            //     href={
                            //       config.searchSiteUrlPrefix + '/patentdetail.html?id=' + item.id
                            //     }
                            //   >
                            //     {val}
                            //   </a>
                            // ),
                          },
                          {
                            title: '权利人',
                            dataIndex: 'pa',
                          },
                          {
                            title: '发明人',
                            dataIndex: 'pin',
                          },
                          {
                            title: '专利类型',
                            dataIndex: 'sectionname',
                            render: (val, item) => <span>{PATENT_CLS_MAP[val] || val}</span>,
                          },
                          {
                            title: '法律状态',
                            dataIndex: 'lastlegalstatus',
                          },
                        ]}
                        dataSource={enterprisePatentReportList}
                        onChange={this.handlePatentListChange.bind(this)}
                        pagination={enterprisePatentReportPaginationProps}
                      />
                    )}
                    {step2 === 2 && (
                      <Table
                        columns={[
                          {
                            title: '成果名称',
                            dataIndex: 'title',
                            // render: (val, item) => (
                            //   <a
                            //     target="_blank"
                            //     href={
                            //       config.searchSiteUrlPrefix + '/chengguodetail.html?id=' + item.id
                            //     }
                            //   >
                            //     {val}
                            //   </a>
                            // ),
                          },
                          {
                            title: '归属高校',
                            dataIndex: 'colleges',
                          },
                          {
                            title: '成果发明人',
                            dataIndex: '-',
                          },
                          {
                            title: '技术类别',
                            dataIndex: 'achievetype',
                          },
                        ]}
                        dataSource={enterpriseAchievementsReportList}
                        onChange={this.handleAchievementListChange.bind(this)}
                        pagination={enterpriseAchievementsReportPaginationProps}
                      />
                    )}
                    {step2 === 3 && (
                      <Table
                        columns={[
                          {
                            title: '专家姓名',
                            dataIndex: 'expertName',
                            // render: (val, item) => (
                            //   <a
                            //     target="_blank"
                            //     href={config.pcSiteUrl + '/expert.html?id=' + item.expertId}
                            //   >
                            //     {val}
                            //   </a>
                            // ),
                          },
                          {
                            title: '高校',
                            dataIndex: 'unitsName',
                          },
                          {
                            title: '推荐指数',
                            dataIndex: 'expertsCount',
                          },
                        ]}
                        dataSource={enterpriseExpertReportList}
                        onChange={this.handleExpertListChange.bind(this)}
                        pagination={enterpriseExpertReportPaginationProps}
                      />
                    )}
                  </div>
                </div>
              </Col>
            </Row>
          </div>
        </Modal>

        <Modal
          maskClosable={false}
          width="85%"
          title="查看标签"
          visible={this.state.modalVisible2}
          onOk={this.handleCancel2.bind(this)}
          onCancel={this.handleCancel2.bind(this)}
        >
          <div className="data_area">
            <Row>
              <Col span={24}>
                <div className="right_wrap">
                  <div className="tagHeader">
                    企业需求匹配标签:
                    {enterpriseRequestTag.map(item => {
                      return (
                        <span class="ant-tag edit-tag" style={{ marginBottom: '8px' }}>
                          <span style={{ margin: '2px 4px' }}>{item.tagName}</span>
                          <a href="javascript:;" onClick={this.handleDelTag.bind(this, item.id)}>
                            X
                          </a>
                        </span>
                      );
                    })}
                  </div>

                  <div className="tagHeader">新增Tag:</div>
                  <div className="tagHeader">
                    <Card bordered={false}>
                      <div className={styles.tableList}>
                        <div className={styles.tableListForm}>{this.renderFormTag()}</div>
                        <StandardTable
                          disableSelect={true}
                          selectedRows={selectedRows}
                          loading={loading}
                          data={this.state.tagListData}
                          columns={columnsTag}
                          onSelectRow={this.handleSelectRows}
                          onChange={this.handleStandardTableChangeTag}
                        />
                      </div>
                    </Card>
                  </div>
                </div>
              </Col>
            </Row>
          </div>
        </Modal>
      </PageHeaderLayout>
    );
  }
}
